{extend name='public/base' /}

{block name="style"}
<style>
    .popover img {
        max-width: 200px;
        max-height: 100px;
    }
</style>
{/block}

{block name="breadcrumb"}
{$crumbs}
{/block}

{block name="body"}
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <button class="btn btn-primary btn-xs"><a href="{:url('save_banner')}"><i class="fa fa-plus"></i> 添加banner</a> </button>
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>图片</th>
                    <th>title</th>
                    <th>url</th>
                    <th>是否显示</th>
                    <th>排序 (越小越靠前)</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="banner" id="vo"}
                <tr>
                    <td>{$vo.id}</td>
                    <td>
                        <a class="element" href="javascript:;" data-html="true" data-content="<img src='/uploads/banner/{$vo.image}' />" data-toggle="popover" data-trigger="click" style=" float: left; width: 50px; height: 20px; border: 1px solid #f0f0f0;">
                            <img style="max-width: 50px; max-height: 20px;" src="/uploads/banner/{$vo.image}" />
                        </a>
                    </td>
                    <td>{$vo.name}</td>
                    <td>{$vo.url}</td>
                    <td data-banner-id="{$vo.id}" data-banner-is_show="{$vo.is_show}">{$vo.is_show ? '<i class="fa fa-check is_show" style="color: #1ab394; cursor: pointer;"> </i>' : '<i class="fa fa-times is_show" style="color: #d9534f; cursor: pointer;"> </i>'}</td>
                    <td><input type="text" value="{$vo.sort}" data-banner-id="{$vo.id}" class="save_sort" data-default="{$vo.sort}" /> </td>
                    <td>
                        <button class="btn btn-info btn-xs"><a href="{:url('save_banner', ['id' => $vo['id']])}"><i class="fa fa-edit"></i> 编辑</a> </button>
                        <button class="btn btn-danger btn-xs" data-kefu-id="{$vo.id}"><a href="javascript:;"><i class="fa fa-trash"></i> 删除</a> </button>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<script>
    $(function () {
        $(".is_show").click(function () {
            var _this = $(this);
            var id = _this.parent().data('banner-id');
            var is_show = _this.parent().data('banner-is_show');
            is_show = is_show ? 0 : 1;
            $.get('{:url("save_banner_show")}', { id : id, is_show : is_show}, function (msg) {
                if (msg.code == 200) {
                    swal({
                        title: msg.msg,
                        type: "success"
                    });
                    if (is_show) {
                        _this.removeClass('fa-times').addClass('fa-check').css('color', '#1ab394').parent().data('banner-is_show', is_show);
                    } else {
                        _this.removeClass('fa-check').addClass('fa-times').css('color', '#d9534f').parent().data('banner-is_show', is_show);
                    }
                } else {
                    swal({
                        title: msg.msg,
                        type: "error"
                    });
                }
            }, 'json');
        });

        $(".save_sort").focus(function () {
            $(this).css('border-color', '#1ab394')
        });
        $(".save_sort").blur(function () {
            var _this = $(this);
            var id = _this.data('banner-id');
            var sort = _this.val();
            var default_sort = _this.data('default');
            $.get('{:url("save_sort")}', { id : id, sort : sort}, function (msg) {
                setTimeout(function () {
                    _this.css('border-color', '#e5e6e7');
                    if (msg.code != 200) {
                        _this.val(default_sort);
                    }
                }, 600);

            }, 'json');
        });
    });
</script>
{/block}